const path = require("path");
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const CracoLessPlugin = require("craco-less");
const { loaderByName } = require("@craco/craco");

const resolve = (dir) => path.resolve(__dirname, dir);
const lessModuleRegex = /\.module\.less$/;
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        // less loader option
        lessLoaderOptions: {
          lessOptions: {
            /*
              如果项目中有使用TDesign或AntDesign组件库需要自定义主题，可以在modifyVars中添加对应less变量
          */
            modifyVars: {
              "@primary-color": "#2378ff",
            },
            javascriptEnabled: true,
          },
        },
        modifyLessRule(lessRule) {
          lessRule.exclude = lessModuleRegex;
          return lessRule;
        },
        modifyLessModuleRule(lessModuleRule) {
          // configure the file suffix
          lessModuleRule.test = lessModuleRegex;

          // configure the generated local ident name
          const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
          cssLoader.options.modules = {
            /* 
              注意这里的命名规则：
              - CRA脚手架创建的项目是可以直接使用css modules的，css文件的命名规则默认是[local]_[hash:base64:5]
              - 这里使用css modules的命名规则
          */

            localIdentName: "[local]_[hash:base64:5]",
          };

          return lessModuleRule;
        },
      },
    },
  ],
  webpack: {
    alias: {
      "@": resolve("src"),
    },
    configure: (webpackConfig, { env, paths }) => {
      console.log(webpackConfig);
      // webpackConfig.entry = './src/index.tsx';
      // webpackConfig.output = {
      //   path: resolve("dist"),
      //   filename: "my-first-webpack.bundle.js",
      // };
      // webpackConfig.devtool = 'eval';
      const loaders = [
        {
          test: /\.(jpg|jpeg|gif|png|eot|ttf|woff|woff2)$/,
          // type: "asset/inline", //webpack5
          use: [
            {
              loader: "url-loader",
              options: {
                limit: 10 * 1024,
                name: "[name].[hash:8].[ext]",
                // fallback: 'file-loader',
              },
            },
          ],
          type: "javascript/auto",
        },
      ];

      webpackConfig.module.rules.push(...loaders);
      return webpackConfig;
    },

    plugins: [
      // new BundleAnalyzerPlugin(), // 使用默认配置
    ],
  },
};
